<template>
  <div id="app">
    <div class="pageTitle"  v-if="loginFlag">
      <div class="conback" @click="comback" v-if="comFlag"><img src="@/assets/images/comback.png" alt=""></div>
      <span>{{titleName}}</span>
     </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      comFlag:false,
      loginFlag:false
    }
  },
  computed:{
    titleName(){
      return this.$route.meta.title 
    }
  },
  methods:{
    comback(){
      this.$router.back(-1)
    }
  },
  watch:{
    $route(to,form){
      if(to.name == 'login' || to.name == '404' || to.name == '500' || to.name == '401'){
        this.loginFlag = false
        this.comFlag = false
      }else if(to.name == 'home' ){
        this.comFlag = false
        this.loginFlag = true
      }else{
        this.comFlag = true
        this.loginFlag = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#app {
  max-width: 1200px;
  margin: 0 auto;
  .pageTitle{
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 1200px;
    z-index: 99999;
    height: 40px;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
    color: #333;
    background: #fff;
    .conback{
      position: absolute;
      height: 100%;
      width: 40px;
      img{
        height: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }
    }
  }
}
</style>
